<template>
    <div>
        <el-dialog
            fullscreen
            destroy-on-close
            @close="closePrivece"
            :visible="dialogVisible">
            <!-- 头部 -->
            <div class="dialog-dt">
                <div class="dt-userinfo">
                    <img 
                    class="avatar" 
                    :src="currentPriveceData.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${currentPriveceData.user.avatar}`">
                    <span class="username">{{currentPriveceData.user.userName}}</span>
                    <a @click="guanzhu(currentPriveceData.user.email)" class="guanzhu" href="javascript:;">
                        {{isGuanzhu ? '已关注' : '关注'}}
                    </a>
                </div>
                <div class="dt-tools">
                    <a @click="submitDianzan" class="dianzan" href="javascript:;">
                        <i class="iconfont">&#xe73f;</i>
                        <span>{{currentPriveceData.dianzan}}</span>
                    </a>
                    <a @click="setIsShoucang" class="shoucang" href="javascript:;">
                        <i v-if="isShoucang" class="iconfont">&#xe61c;</i>
                        <i v-else class="iconfont">&#xe613;</i>
                        <span>{{isShoucang ? '已收藏' : '收藏'}}</span>
                    </a>
                </div>
            </div>

            <!-- 当前预览图 -->
            <div class="privece-img">
                <img :src="`http://47.105.157.158:3000/images/cat/${currentPriveceData.cat}/${currentPriveceData.pathName}`" alt="">
            </div>
       
            <!-- 当前预览图的专辑列表图片 -->
            <div class="privece-list-title">当前图片专辑相关</div>
            <div class="privece-list">
                <img
                @click="setCurrentImg(index)"
                :key="index"
                v-for="(item, index) in currentAlbumList"
                :class="currentImg == index ? 'current-img' : ''" 
                v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.pathName}`" alt="">
           
            </div>

            <!-- 评论区 -->
            <div class="w">
                <div class="comment-title">评论区域</div>
                <div class="comment">
                    <el-input v-model="commentText" placeholder="发个评论见证当下吧！"></el-input>
                    <el-button @click="submitComment" type="primary">评论</el-button>
                </div>

                <div class="comment-list">
                    <div class="list-number">当前图片共有<span>{{currentPriveceData.comment.length}}</span>条评论</div>
                    <div 
                    :key="index"
                    v-for="(item, index) in currentPriveceData.comment"
                    class="list-item">
                        <img v-lazy="item.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.user.avatar}`" alt="">
                        <span>{{item.user.userName}}</span>
                        <p>{{item.text}}</p>
                    </div>
                </div>
            </div>
            


            <!-- 插槽 -->
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
    </div>
</template>

<script>
import { ref, inject, onMounted } from '@vue/composition-api';
import axios from 'axios';
export default {
    props: {
        currentPriveceData: {
            type: Object,
            default: {}
        }
    },
    setup(props, context) {

        // 配置 axios
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getCurrentAlbumList();
            isGuanZhued();
            getIsShoucang(); 
        })

        // 控制预览框的显示与隐藏
        const dialogVisible = ref(true);

        // 隐藏预览窗口
        const closePrivece = function () {
            context.emit('closePrivece', false);
        }

        // 当前预览的图片
        const currentImg = ref(0);
        // 设置当前预览的图片
        const setCurrentImg = function (index) {
            currentImg.value = index;
            // 把当前的预览的图片数据，触发给父组件处理
            context.emit('setCurrentPriveceImg', currentAlbumList.value[index]);
        }

        // 当前预览图的专辑列表图片
        const currentAlbumList = ref([]);

        // 获取当前预览图的专辑列表图片
        const getCurrentAlbumList = async function () {
            let { data: res } = await axios.get(`/get/album/${props.currentPriveceData.albumName}`);
            if (res.status != 200) 
                return context.parent.$message.error('获取专辑列表失败，请退出后，刷新重试');
            
            context.parent.$nextTick(() => {
                currentAlbumList.value = res.alubmList;
                // 设置当前被打开的专辑列表样式
                let index = res.alubmList.findIndex(item => {
                    return item.pathName == props.currentPriveceData.pathName;
                });
                setCurrentImg(index);
            })            
        }

        // 当前评论内容
        const commentText = ref('');
        // 提交评论
        const submitComment = async function () {
            // 判断评论内容是否为空
            if (commentText.value.trim().length == 0) 
                return context.parent.$message.error('评论内容，不能为空');
            // 判断是否处于登录状态
            if (!window.localStorage.getItem('token'))
                return context.parent.$message.error('请先登录后，再提交评论');
            // 获取当前评论的用户
            let { data: user } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (user.status == 200) {
                // 当前被评论的图片ID
                let currentID = props.currentPriveceData._id;
                // 当前评论的用户
                let currentUser = user.user;
                // 当前评论内容
                let currentText = commentText.value;
                // 提交评论
                let { data: res } = await axios.post('/set/comment', { currentID, currentUser, currentText });
                if (res.status == 200) {
                    // 触发事件让父组件修改数据
                    context.emit('newPriveceData', res.newImg);
                    context.parent.$message.success('评论成功，感谢支持');
                } else {
                    context.parent.$message.error('评论遇到未知错误，请退出刷新后，重新打开该窗口');
                }
                // 清空评论
                commentText.value = '';
            } else {
                return context.parent.$message.error('评论失败，请先退出当前窗口，重新打开');
            }
        }
        
        // 点赞
        const submitDianzan = async function () {
            let { data: res } = await axios.post(`/set/dianzan/${props.currentPriveceData._id}`);
            if (res.status == 200) {
                // 触发事件，让父组件更新数据
                context.emit('newCurrentDianzanData', res.newImg);
                context.parent.$message.success('点赞成功，要节制哟~');
                return;
            } else {
                return context.parent.$message.error('点赞失败遇到未知错误，请退出刷新后，重新打开此窗口');
            }
        }

        // 控制关注和已关注的显示
        const isGuanzhu = ref(false);

        // 关注
        const guanzhu = async function (user) {
            // user 是被关注的用户
            // 判断有没有在登录的情况
            if (!window.localStorage.getItem('token'))
                return context.parent.$message.error('抱歉，您还没有在登录，请登录后再关注');
            
            // 获取token得到关注的用户
            let { data: theuser } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (theuser.status != 200)
                return context.parent.$message.error('遇到未知错误，你可能没有登录，请刷新后重试');
            let theemail = theuser.user.email;

            // 发送请求
            let { data: res } = await axios.post(`/set/guanzhu/${user}/${theemail}`);
            if (res.status != 200)
                return context.parent.$message.error('遇到未知错误，你可能没有登录，请退出后重试');
            context.parent.$message.success(res.msg);
            isGuanzhu.value = res.op == 1 ? true : false;
            // 触发事件，让父组件修改数据
            context.emit('setGuanzhuData', res.newuser);
        }

        // 判断当前预览用户，之前有没有关注过，该用户
        const isGuanZhued = async function () {
            // 如果没有登录，就不获取
            if (!window.localStorage.getItem('token'))
                return false;
            // 获取当前用户
            let { data: res } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (res.status != 200)
                return context.parent.$message.error('获取当前用户信息失败，请退出后刷新重试');
            // 判断
            let flag = res.user.guanzhu.includes(props.currentPriveceData.user.email);
            isGuanzhu.value = flag;
        }

        // 判断当前用户是否收藏
        const isShoucang = ref(false);
        // 获取当前用户是否收藏
        const getIsShoucang = async function () {
            // 没有登录就不判断
            if (!window.localStorage.getItem('token'))
                return false;
            // 当前图片的路径
            let path = props.currentPriveceData.pathName;
            // 获取当前用户
            let { data: theuser } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (theuser.status != 200)
                return context.parent.$message.error('登录异常，请重新登录');
            let { data: res } = await axios.get(`/user/is/shoucang/${path}/${theuser.user.email}`);
            if (res.status != 200)
                return context.parent.$message.error('未知错误，请重新登录后尝试');
            isShoucang.value = res.flag;
        }
        // 添加进收藏
        const setIsShoucang = async function () {
            // 没有登录就不判断
            if (!window.localStorage.getItem('token'))
                return context.parent.$message.error('您还没有登录，请登录后尝试');
            // 当前图片的路径
            let path = props.currentPriveceData.pathName;
            // 获取当前用户
            let { data: theuser } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (theuser.status != 200)
                return context.parent.$message.error('遇到未知错误，请尝试重新登录');
            let { data: res } = await axios.post(`/user/shoucang/${path}/${theuser.user.email}`);
            if (res.status != 200)
                return context.parent.$message.error('收藏失败，请尝试重新登录');
            context.parent.$message.success(res.msg);
            isShoucang.value = !res.flag;
        }
 
        const methods = 
        { 
            closePrivece, 
            setCurrentImg, 
            submitComment, 
            submitDianzan, 
            guanzhu, 
            isGuanZhued,
            setIsShoucang
        }

        return {
            ...methods,
            dialogVisible,
            currentImg,
            commentText,
            currentAlbumList,
            isGuanzhu,
            isShoucang,
        }
    }
}
</script>

<style lang="less" scoped>
.dialog-dt {
    position: relative;
    padding: 12px;
    box-shadow: 0 10px 10px #ccc;
    .dt-userinfo {
        margin-top: 10px;
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 20px;
        }
        .username {
            font-size: 16px;
            font-weight: 700;
        }
        .guanzhu {
            display: inline-block;
            width: 60px;
            height: 30px;
            background-color: #3aa7fb;
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 6px;
            font-weight: 700;
            margin-left: 20px;
        }
    }

    .dt-tools {
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        .dianzan,
        .shoucang {
            display: inline-block;
            padding: 0 12px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 6px;
            font-weight: 700;
            margin-left: 20px;
            border: 1px solid #ebebec;
            color: #595959;
            i {
                margin-right: 6px;
            }
        }
    }
}

.privece-img {
    margin-top: 20px;
    padding: 12px;
    img {
        width: 100%;
    }
}

.privece-list {
    width: 600px;
    height: 120px;
    margin: 0 auto;
    columns: auto 4;
    column-gap: 6px;
    overflow-y: auto;
    img {
        width: 100%;
        height: 100px;
        object-fit: fill;
        vertical-align: middle;
        cursor: pointer;
        break-inside: avoid;
        transition: all .6s;
    }
}

.current-img {
    filter: grayscale(100%);
}

.w {
    padding-top: 60px;
}

.comment-title {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
}

.comment {
    display: flex; 
}

.comment-list {
    margin: 20px 0;
    .list-number {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        span {
            color: red;
            margin: 0 10px;
        }
    }
    .list-item {
 
        padding: 10px;
        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 12px;
        }
        span {
            font-weight: 700;
        }
        p {
            margin-top: 10px;
        }
    }
}

.privece-list-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
}
</style>